<template>
  <div class="realName">
    <div class="title">
      <i class="iconfont iconzuojiantou" @click="onClickLeft"></i>
      <span>详情</span>
      <i class="iconfont iconzuojiantou" style="color: white;"></i>
    </div>
    <div class="file">
      <van-cell-group>
        <van-field
          v-model="villageName"
          clearable
          label="所在村庄:"
          placeholder="请输入所在村庄"
        />

        <van-field
          v-model="name"
          type="text"
          clearable
          label="真实姓名:"
          placeholder="请输入真实姓名"
        />
        <van-field
          v-model="codeNum"
          type="number"
          clearable
          label="身份证号:"
          placeholder="请输入您的身份证号"
          maxlength="18"
        />
      </van-cell-group>
    </div>
    <div class="upInfo">
       <h3>请上传身份信息</h3>
       <div class="imgs">
         <div class="one">
            <img :src="qrCode" alt="" v-if="qrCode">
            <img src="../assets/realname/img1.png" alt="" v-else>
            <input type="file" class="upFile"  accept="image/*" name="file" @change="ImgClick($event)">
            <span>身份证正面</span>
         </div>
         <div class="one">
           <img :src="qrCode1" alt="" v-if="qrCode1">
            <img src="../assets/realname/img2.png" alt="" v-else>
            <input type="file" class="upFile"  accept="image/*"  name="file" @change="ImgClick1($event)">
            <span>身份证反面</span>
         </div>
         <div class="one">
           <img :src="qrCode2" alt="" v-if="qrCode2">
            <img src="../assets/realname/img3.png" alt="" v-else>
            <input type="file" class="upFile"  accept="image/*" name="file" @change="ImgClick2($event)">
            <span>手持身份证</span>
         </div>
       </div>
    </div>
    <div class="tiaoli">
       <van-checkbox v-model="checked" shape="square"></van-checkbox>
       <span>请确认服务条款《XXX服务条款》</span>
    </div>
    <div class="submit" @click="goTaskDetail">
       提交审核
    </div>
    <div class="txt" @click="openPhoneModel">
        如果没有找到村庄请可以选择成为村长
        <i class="iconfont iconzuojiantou1"></i>
    </div>
    <!-- 一键拨打电话 -->
    <div class="phoneModel" v-show="phoneModel">
       <div class="phoneBox">
           <div class="top" @click="closePhoneModel">
             <i class="iconfont iconshanchuguanbicha"></i>
           </div>
           <div class="second">
             <i class="iconfont icondianhua"></i>
             <span>联系方式</span>
           </div>
           <div class="telNum">
              <span>+86</span><span>{{phoneNumber}}</span>
           </div>
           <div class="immit" @click="callPhone">
             立即拨打
           </div>
       </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: "realName",
  data() {
    return {
       villageName:'',//村庄
       name:"",//名字
       codeNum:"",//身份证号
       checked:true,
       phoneModel:false,//一键拨打电话弹框
        imgFile:null,
        qrCode:'',
        imgFile1:null,
        qrCode1:'',
        imgFile2:null,
        qrCode2:'',
        phoneNumber:"136733798916"
    }


  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    //提交审核
    goTaskDetail (){
        this.$router.push('/taskDetails');
       var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if(this.villageName==''){
         Toast('请输入所在村庄')
      }else if(this.name==""){
         Toast("请输入真实姓名")
      }else if(this.codeNum==''){
        Toast("请输入身份证号")
      }else if(!reg.test(this.codeNum)){
        Toast("身份证号格式不正确")
      }
      else if(this.qrCode==''){
         Toast("请上传身份证正面")
      }else if(this.qrCode1==''){
          Toast("请上传身份证反面")
      }else if(this.qrCode2==''){
         Toast("请上传手持身份证正面")
      }else if(this.checked==false){
         Toast("请先勾选服务条款")
      }else{
         this.$axios.post("",{
           villageName: this.villageName,
           name:this.name,
           codename:this.codename,
           qrCode:this.qrCode,
            qrCode1:this.qrCode1,
             qrCode2:this.qrCode2,
         }).then(res =>{
            console.log(res)
            if(res.data.code==0){
                Toast(res.data.msg)
                this.$router.push('/taskDetails')
            }else{
               Toast(res.data.msg)
            }
         })
      }

    },
     // 调用拨号功能
      callPhone (phoneNumber) {
          window.location.href = 'tel://' + this.phoneNumber
      },
      //关闭模态框
      closePhoneModel (){
         this.phoneModel=false
      },
       //打开模态框
      openPhoneModel (){
        console.log("但是v很多事v")
         this.phoneModel=true
      },
       //上传身份证正面图片
        ImgClick(e) {
          var that = this;
          console.log("上传图片");
          console.log(e)
          var fil = e.target.files[0];
          console.log(fil);
          that.base(fil, function(base64Data, fileName) {
            that.qrCode = base64Data;
            that.imgFile = that.dataURLtoFile(base64Data, fileName);
            console.log("上传图片的二进制");
            console.log(that.imgFile);
          });
        },
        //上传身份证反面图片
        ImgClick1(e) {
          var that = this;
          console.log("上传图片");
          var fil = e.target.files[0];
          console.log(e.target.value);
          console.log(fil);
          that.base(fil, function(base64Data, fileName) {
            that.qrCode1 = base64Data;
            that.imgFile1 = that.dataURLtoFile(base64Data, fileName);
            console.log("上传图片的二进制");
            console.log(that.imgFile);
          });
        },
         //上传手持图片
        ImgClick2(e) {
          var that = this;
          console.log("上传图片");
          var fil = e.target.files[0];
          console.log(e.target.value);
          console.log(fil);
          that.base(fil, function(base64Data, fileName) {
            that.qrCode2 = base64Data;
            that.imgFile2 = that.dataURLtoFile(base64Data, fileName);
            console.log("上传图片的二进制");
            console.log(that.imgFile);
          });
        },
  }
};
</script>

<style lang="less" scoped>
.realName {
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  font-size: 0;
  position: relative;
  .title {
    width: 100%;
    font-size: 0.36rem;
    color: #333;
    height: 1.25rem;
    line-height: 1.25rem;
    background-color: #fff;
    margin-bottom: 0.2rem;
    display: flex;
    justify-content: space-between;
    padding: 0 0.2rem;
    box-sizing: border-box;
  }
  .upInfo{
     margin-top:0.1rem;
     font-size: 0.28rem;
     color:#333;
     padding:0.3rem;
     box-sizing: border-box;
     background-color: #fff;
    .imgs{
       display: flex;
       justify-content: space-between;
       margin-top:0.25rem;
       .one{
           text-align: center;
            position: relative;
          img{
              width: 2rem;
              height: 1.27rem;
              border-radius: 0.2rem;
                margin-bottom:0.1rem;

          }
          span{
             font-size: 0.24rem;
             color:#333;
          }
       }
    }
    .upFile{
        width: 2rem;
        height: 1.27rem;
        border-radius: 0.2rem;
        opacity: 0;
        position: absolute;
        top:0;
        left:0;
    }
  }
  .tiaoli{
     font-size: 0.24rem;
     color:#999;
     display: flex;
     justify-content: center;
    padding: 0.3rem 0 0.5rem 0;
    box-sizing: border-box;
     span{
        margin-left:0.1rem;
        margin-top:0.05rem;
      }
     .van-checkbox{
        transform: scale(0.7);
        border-radius: 0.1rem;
     }
  }
  .submit{
     width:6.9rem;
      height:.80rem;
      background:rgba(56,168,63,1);
      border-radius:.20rem;
      line-height: 0.8rem;
      text-align: center;
      font-size: 0.3rem;
      color:#fff;
      margin: 0 auto;
  }
  .txt{
     font-size: 0.24rem;
     color:#a4d6a7;
    width: 100%;
    text-align: center;
    margin-top:0.3rem;
    i{
      font-size: 0.26rem;
    }
  }
   //一键拨打电话
  .phoneModel{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.6);
      font-size: 0.26rem;
      .phoneBox{
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          background-color: #fff;
          width: 6.5rem;
          height:3.5rem;
          padding:0.2rem 0.2rem 0.4rem 0.4rem;
          box-sizing: border-box;
          border-radius: 0.2rem;
          .top{
             text-align: right;
             i{
                font-size: 0.3rem;
             }
          }
          .second{
             width: 100%;
             text-align: center;
             margin:0.2rem auto 0.4rem;
             font-size: 0.28rem;
             color:#222;
             i{
                color:#1184ef;
                font-size: 0.26rem;
             }
          }
          .telNum{
             text-align: center;
             font-size: 0.28rem;
             color:#222;
             span:nth-child(1){
                margin-right:0.1rem;
             }
          }
          .immit{
             width:5rem;
            height:.84rem;
            background:rgba(56,168,63,1);
            border-radius:0.42rem;
            margin:0 auto;
            color: #fff;
            font-size: 0.34rem;
            line-height: 0.84rem;
            text-align: center;
            margin-top:0.4rem;
          }
      }
  }
}
</style>

